<template>
  <div>
    <div>
      <div my-2>{{ t["已选择商品"] }}</div>
      <ul>
        <li v-for="(item, key) in productList" :key="item.goodsId" class="item">
          <div>
            {{ item.goodsName }}
          </div>

          <icon-close @click="del(key)" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getGoods } from "@/api/service/goods/goods";
import { Goods } from "@/api/service/goods/types";

const props = defineProps<{
  list: string[];
}>();
const t = translate("公共模块");
const productList = ref<Goods[]>([]);

const del = (index: number) => {
  props.list.splice(index, 1);
};

watch(
  () => props.list,
  async () => {
    const promiseList = props.list.map(async (v) => {
      return await getGoods(v);
    });
    const result = await Promise.all(promiseList);
    productList.value = [];
    result.forEach((v) => {
      productList.value?.push(v.data);
    });
  },
  {
    immediate: true,
    deep: true
  }
);
</script>

<style lang="scss" scoped>
.item {
  @apply flex justify-between items-center mb-1 cursor-pointer hover:bg-gray-100 px-2 py-1;
}
</style>
